<template>
	<view>
		<view class="lc-detail-box">
			<view class="lc-head">
				<view class="lc-title">{{detail.info.title}}</view>
				<view class="lc-money">{{detail.info.price_text}}</view>
			</view>
			<view class="lc-new-con">
				<view class="lc-new-left">
					<view class="lc-address">
						<image src="/static/address.png" mode="widthFix"></image>
						<view>{{detail.info.city}}</view>
					</view>
					<view class="lc-time">发布时间{{detail.info.createtime}}</view>
					<view class="lc-time" style="margin-top: 10rpx;">
						招聘人数:{{detail.info.people_num}}-{{detail.info.type_text}}</view>
				</view>
				<view class="lc-new-right">
					<view class="lc-anniu" @click="address">
						<image :src="baseurl+'/imgs/re1.png'" mode="widthFix"></image>
						<view>导航</view>
					</view>
					<view class="lc-anniu" @click="call">
						<image :src="baseurl+'/imgs/re2.png'" mode="widthFix"></image>
						<view>电话</view>
					</view>
				</view>
			</view>
		</view>
		<view class="lc-detail-box">
			<view class="lc-name">薪资详情</view>
			<view class="lc-line">薪资范围：{{detail.info.price_text}}/月</view>
			<view class="lc-line">发薪日期：{{detail.info.price_day}}</view>
			<view class="lc-line">奖金补贴：{{detail.info.price_add}}</view>
		</view>
		<view class="lc-detail-box">
			<view class="lc-name">工作地址</view>
			<view class="lc-line">{{detail.info.ress}}{{detail.info.ress_detail}}</view>
		</view>
		<view class="lc-detail-box">
			<view class="lc-name">职位详情</view>
			<view class="lc-line">
				<text>{{detail.info.introduction}}</text>
			</view>
		</view>
		<view class="lc-gs">
			<view class="lc-gs-box" @click="companyDetail(detail.shop_info.id)">
				<image :src="baseurl+detail.shop_info.avatar" mode="aspectFill"></image>
				<view>{{detail.shop_info.shopname}}</view>
				<image src="/static/next.png" mode="widthFix" class="lc-next"></image>
			</view>
			<view class="lc-gs-detail">
				<text v-if="detail.shop_info.bio">{{detail.shop_info.bio}}</text>
			</view>
		</view>
		<view class="lc-big"></view>
		<view class="lc-foot" v-if="type==1">
			<image :src="detail.collect_zt == 0 ? baseurl+'/imgs/re3.png' : baseurl+'/imgs/re33.png'" class="lc-collect"
				mode="widthFix" @click="tabCollectState"></image>
			<view class="lc-call" @click="call">
				<image :src="baseurl+'/imgs/re4.png'" mode="widthFix"></image>
				<view>立即沟通</view>
			</view>
			<block v-if="list.length>0">
				<picker @change="bindPickerChange" :value="index" range-key="job_name" :range="list">
					<view class="lc-tou">立即投递</view>
				</picker>
			</block>
			<block v-else>
				<view class="lc-tou" @click="lisgo">立即投递</view>
			</block>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				app: getApp().globalData,
				baseurl: getApp().globalData.baseurl,
				detail: {},
				type: 0,
				list: [],
				index: -1,
				id: ""
			}
		},
		onLoad(e) {
			this.id = e.id
			this.type = e.type
			this.app.post('/api/wanlshop/user/workvitat').then(res => {
				console.log(res)
				this.list = res.list.data
			})
			this.app.post('/api/wanlshop/user/workdetail', {
				id: e.id,
			}).then(res => {
				console.log(res)
				this.detail = res
			})
		},
		methods: {
			lisgo(){
				uni.showToast({
					title: '暂无简历，请前往个人中心添加简历',
					icon: "none"
				})
			},
			bindPickerChange(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
				console.log(this.list[this.index].id)
				this.app.post('/api/wanlshop/user/workorderadd', {
					work_id: this.id,
					vitae_id: this.list[this.index].id,
				}).then(res => {
					console.log(res)
					uni.showToast({
						title: '投递成功',
						icon: "none"
					})
				})
			},
			tabCollectState() {
				this.app.post('/api/wanlshop/user/addshoucang', {
					id: this.detail.info.id,
					type: 1
				}).then(res => {
					console.log(res)
					if (this.detail.collect_zt == 1) {
						this.detail.collect_zt = 0
						uni.showToast({
							title: '取消收藏',
							icon: "none"
						})
					} else {
						this.detail.collect_zt = 1
						uni.showToast({
							title: '已收藏',
							icon: "none"
						})
					}
				})
			},
			address() {
				uni.openLocation({
					latitude: Number(this.detail.shop_info.latitude),
					longitude: Number(this.detail.shop_info.longitude),
					scale: 18,
					name: this.detail.shop_info.shopname,
					address: this.detail.shop_info.address,
					fail: (res) => {
						console.log(res)
					}
				})
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: String(this.detail.shop_info.mobile),
					fail: (res) => {
						console.log(res)
					}
				});
			},
			companyDetail(id) {
				uni.navigateTo({
					url: '/pages/lc/companyDetail/companyDetail?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.lc-detail-box {
		width: 690rpx;
		padding: 50rpx 0;
		margin-left: 30rpx;
		border-bottom: 1px solid #eee;

		.lc-head {
			width: 690rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.lc-title {
				font-size: 40rpx;
				color: #333333;
			}

			.lc-money {
				font-size: 40rpx;
				color: #84BD00;
				font-weight: bold;
			}
		}

		.lc-new-con {
			width: 690rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.lc-new-left {
				.lc-address {
					display: flex;
					align-items: center;
					margin-top: 30rpx;
					margin-bottom: 30rpx;

					image {
						width: 36rpx;
						height: 36rpx;
					}

					view {
						font-size: 30rpx;
						color: #666666;
						margin-left: 12rpx;
					}
				}

				.lc-time {
					font-size: 30rpx;
					color: #999999;
				}
			}

			.lc-new-right {
				display: flex;

				.lc-anniu {
					width: 52rpx;
					display: flex;
					justify-content: center;
					flex-wrap: wrap;
					margin-left: 42rpx;

					image {
						width: 52rpx;
						height: 52rpx;
					}

					view {
						font-size: 26rpx;
						color: #999999;
						margin-top: 10rpx;
					}
				}
			}
		}

		.lc-name {
			font-size: 33rpx;
			color: #3D3D3D;
			padding-bottom: 10rpx;
		}

		.lc-line {
			font-size: 30rpx;
			color: #666666;
			margin-top: 20rpx;
		}


	}

	.lc-gs {
		width: 690rpx;
		padding: 50rpx 0;
		margin-left: 30rpx;
		position: relative;

		.lc-gs-box {
			width: 690rpx;
			display: flex;
			align-items: center;

			image {
				width: 100rpx;
				height: 100rpx;
			}

			view {
				font-size: 33rpx;
				color: #3D3D3D;
				margin-left: 28rpx;
			}

			.lc-next {
				position: absolute;
				width: 30rpx;
				height: 30rpx;
				right: 30rpx;
			}
		}

		.lc-gs-detail {
			width: 690rpx;
			font-size: 30rpx;
			margin-top: 40rpx;
			color: #666666;
		}
	}

	.lc-foot {
		width: 750rpx;
		height: 120rpx;
		background-color: #FFFFFF;
		box-shadow: 0px 8rpx 24rpx 0px rgba(0, 0, 0, 0.2);
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;

		.lc-collect {
			width: 54rpx;
			height: 54rpx;
			margin-left: 30rpx;
		}

		.lc-call {
			width: 278rpx;
			height: 82rpx;
			background-color: rgba(132, 189, 0, 0.1);
			border-radius: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-top: 4rpx;
			}

			view {
				font-size: 32rpx;
				color: #84BD00;
				margin-left: 6rpx;
			}
		}

		.lc-tou {
			width: 278rpx;
			height: 82rpx;
			background-color: #84BD00;
			color: #FFFFFF;
			border-radius: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 30rpx;
		}

		.lc-edit {
			width: 300rpx;
			height: 82rpx;
			background: rgba(132, 189, 0, 0.1);
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50rpx;
			color: #84BD00;
			font-size: 33rpx;
			margin-left: 30rpx;
		}

		.lc-add {
			width: 330rpx;
			height: 82rpx;
			background: #84BD00;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50rpx;
			color: #FFFFFF;
			font-size: 33rpx;
			margin-right: 30rpx;
		}
	}
</style>